/<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="规则名称">
          <template slot="content">
            <el-input
              v-model="requestData.name"
              placeholder="请输入规则名称"
            />
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              :loading="loading"
              style="margin-left: 10px"
              type="primary"
              @click="clickSearch('查询')"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table ">
      <div class="action-box">
        <div class="left"></div>
        <div class="right rowFlex allCenter">
          <el-button
            type="primary"
            @click="onAdd"
          >新增规则</el-button>
        </div>
      </div>
      <div>
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:zip="{row}">
            <el-button
              type="text"
              size="medium"
              @click="onSet(row,'编辑')"
            >编辑</el-button>
            <el-button
              type="text"
              size="medium"
              @click="onSet(row,'复制')"
            >复制</el-button>
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer
      v-model="Drawer.visible"
      :drawer-title="Drawer.title"
      :component="addRecommends"
      :row="Drawer.row"
      drawer-size="562px"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>

<script>
import { playlet_recommendindex } from '@/api/recommends'
import addRecommends from './component/addRecommends'
export default {
  components: {},
  data() {
    return {
      loading: false,
      requestData: {
        name: ''
      },
      tableColums: [
        {
          label: '推荐规则名称',
          prop: 'name',
          render: (h, { row }) => {
            return (
              <span>
                {row.name}/{row.id}
              </span>
            )
          }
        },
        {
          label: '频道',
          prop: 'gender_type',
          render: (h, { row }) => {
            return <span>{row.gender_type == 1 ? '男频' : row.gender_type == 2 ? '女频' : '其他'}</span>
          }
        },
        {
          label: '短剧标签',
          prop: 'playlet_tags',
          render: (h, { row }) => {
            if (row.playlet_tags.length > 0) {
              return (
                <div style='display:flex;flex-wrap: wrap;'>
                  {row.playlet_tags.map((item) => {
                    return (
                      <span class='colorStatus' style='margin-left:5px;margin-top:5px;'>
                        <span class='success'> {item.name} </span>
                      </span>
                    )
                  })}
                </div>
              )
            }
          }
        },
        {
          label: '创建人',
          prop: 'creator'
        },
        {
          label: '更新时间',
          prop: 'update_time'
        },
        {
          label: '操作',
          prop: 'zip',
          slotScope: true
        }
      ],
      tableData: [],
      page_info: {
        page_size: 20,
        page: 1,
        total: 0
      },
      addRecommends: addRecommends,
      Drawer: {
        title: '',
        visible: false,
        row: {}
      }
    }
  },
  mounted() {
    this.$AccessReport.report('zhangyu-recharge', [this.$store.state.user.routerItem.name, '推荐剧管理', '推荐剧管理'])
    this.onGetList()
  },
  methods: {
    async onGetList() {
      this.loading = true
      const res = await playlet_recommendindex({
        ...this.requestData,
        ...this.page_info
      })
      if (res.status_code === 1) {
        this.loading = false
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      }
    },
    reset() {
      this.requestData = { name: '' }
    },
    onSet(row, type) {
      if (type === '编辑') {
        this.Drawer = {
          title: '编辑',
          visible: true,
          row: { ...row, open_type: 2 }
        }
      } else if (type === '复制') {
        const obj = JSON.parse(JSON.stringify(row))
        delete obj.id
        this.Drawer = {
          title: '编辑',
          visible: true,
          row: { ...obj, open_type: 3 }
        }
      }
    },
    name() {},
    onAdd() {
      this.Drawer = {
        title: '新增规则',
        visible: true,
        row: { open_type: 1 }
      }
    },
    clickSearch() {
      this.page_info.page = 1
      this.onGetList()
    },
    onSubmit() {
      console.log('123456789')
      this.onGetList()
    },
    handlePageChange({ page }) {
      this.page_info.page = page
      this.onGetList()
    }
  }
}
</script>

<style>
</style>